<template>
  <div>
    <div style="margin-top: 3%;">
      <el-form :inline="true" ref="form" label-width="100px">
        <el-form-item label="资源类型">
          <el-select v-model="searchParams.resourceTypeTbale" placeholder="请选择资源类型" @change="handleResourceTypeChange">
            <el-option label="全部资源" value="all"></el-option>
            <el-option label="资源集" value="Zyj"></el-option>
            <el-option label="ELB" value="Elb"></el-option>
            <el-option label="ECS" value="Ecs"></el-option>
            <el-option label="RDS" value="Rds"></el-option>
            <el-option label="DCS" value="Dcs"></el-option>
            <el-option label="BMS" value="Bms"></el-option>
            <el-option label="弹性ip" value="TxIp"></el-option>
            <el-option label="CCE" value="CCE"></el-option>
            <el-option label="DDM" value="DDM"></el-option>
            <el-option label="DDS" value="DDS"></el-option>
            <el-option label="DRS" value="DRS"></el-option>
            <el-option label="EVS" value="EVS"></el-option>
            <el-option label="RomaConnect" value="RomaConnect"></el-option>
            <el-option label="ServiceStage" value="ServiceStage"></el-option>
            <el-option label="VPC" value="VPC"></el-option>
          </el-select>
        <el-form-item label="模糊搜索" v-if="searchParams.resourceTypeTbale === 'all'" :inline="true">
          <el-input placeholder="全局模糊查询" v-model="searchParams.universalSearch"></el-input>
        </el-form-item>
        </el-form-item>
        <el-form-item label="名称" v-if="searchParams.resourceTypeTbale !== 'all'" :inline="true">
          <el-input placeholder="请输入名称" v-model="searchParams.name"></el-input>
        </el-form-item>
        <el-form-item label="所属资源集">
          <el-input placeholder="请输入所属资源集" v-model="searchParams.resource_set_name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetAndFetchData">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
        <!-- 列配置按钮 -->
        <el-button @click="showColumnSettings">自定义表头</el-button>
        <el-button @click="exportAllToExcel">导出数据</el-button>
        <!-- 列配置对话框 -->
        <el-dialog title="自定义表头" :visible.sync="columnDialogVisible" width="30%">
          <el-checkbox-group v-model="selectedColumns">
            <el-checkbox
              v-for="column in availableColumns.filter(column => column.prop !== 'operation')"
              :key="column.prop"
              :label="column.prop"
            >{{ column.label }}</el-checkbox>
          </el-checkbox-group>
          <div slot="footer" class="dialog-footer">
            <el-button @click="columnDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="applyColumnSettings">确定</el-button>
          </div>
        </el-dialog>
      </el-form>
    </div>

    <div style="margin: 2%;width: 96%; overflow-x: auto;">
      <el-table :data="listData" border :style="tableStyle">
        <el-table-column
          v-for="column in displayedColumns"
          :key="column.prop"
          :prop="column.prop"
          :label="column.label"
          v-if="column.visible && column.prop !== 'operation'"
          :show-overflow-tooltip="true"
          :min-width="column.minWidth || '150px'"
          :max-width="column.maxWidth"
        ></el-table-column>
        <!-- 操作列特殊处理，始终保持显示 -->
        <!-- <el-table-column label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button @click="" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <div class="bottom-pagination">
      <el-pagination
        style="margin: 30px 0px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="perPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>

import axios from 'axios';
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';

export default {
  data() {
    return {
      listData: [], // 存储列表数据
      searchParams: {
        name: '', // 名称搜索参数
        resource_set_name: '', // 资源集名称搜索参数
        resourceTypeTbale: 'all', // 设置默认值
        universalSearch: '', // 万能搜索参数
      },
      currentPage: 1, // 当前页码
      perPage: 10, // 每页数量
      total: 0, // 总条数
      availableColumns: [], // 动态设置表格列
      displayedColumns: [], // 动态设置表格列
      columnDialogVisible: false, // 控制列配置对话框的显示隐藏
      selectedColumns: [], // 用户在列配置对话框中选择的列
      tableStyle: {
        width: '100%',
        tableLayout: 'auto',
      },
    };
  },
  methods: {
    fetchData() {
      axios.get('/api/ybz/search_ybz', {
        params: {
          name: this.searchParams.name,
          resource_set_name: this.searchParams.resource_set_name,
          resourceTypeTbale: this.searchParams.resourceTypeTbale,
          universalSearch: this.searchParams.universalSearch, // 传递万能搜索参数
          page: this.currentPage,
          per_page: this.perPage,
        }
      }).then(response => {
        this.listData = Array.isArray(response.data.data) ? response.data.data : [];
        //this.listData = response.data.data;
        this.total = response.data.meta.total || 0; // 确保total有默认值
      }).catch(error => {
        console.error("Error fetching data:", error);
      });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    handleSizeChange(size) {
      this.perPage = size;
      this.currentPage = 1;
      this.fetchData();
    },
    resetSearch() {
      const currentResourceType = this.searchParams.resourceTypeTbale; // 保存当前的 resourceTypeTbale
      this.searchParams = { name: '', resource_set_name: '', resourceTypeTbale: currentResourceType, universalSearch: ''};
      this.currentPage = 1;
      this.fetchData();
    },
    resetAndFetchData() {
      // 重置分页参数并重新查询
      this.currentPage = 1;
      this.fetchData();
    },
    handleResourceTypeChange() {
      this.searchParams.universalSearch = '';
      this.searchParams.name = '';
      this.searchParams.resource_set_name = '';
      this.currentPage = 1;
      this.updateColumns();
      this.fetchData(); // 请求后端数据
    },
    updateColumns() {
      const resourceType = this.searchParams.resourceTypeTbale;
      if (resourceType === 'all') {
        this.availableColumns = [
          { prop: 'name', label: '名称' },
          { prop: 'resource_type', label: '资源类型' },
          { prop: 'region', label: '区域' },
          { prop: 'resource_set_name', label: '所属资源集' },
          { prop: 'resource_name', label: '项目名称' },
          { prop: 'vdc_id', label: '所属VDC' },
          { prop: 'created_at_utc', label: '创建时间' },
          { prop: 'ecs_id', label: 'ecs_id' },
          { prop: 'order_number', label: '申请订单号' },
          { prop: 'resource_group', label: '所属资源组' },
          { prop: 'available_zone', label: '可用分区' },
          { prop: 'user_id', label: '用户ID' },
          { prop: 'description', label: '描述' },
          { prop: 'status', label: '状态' },
          { prop: 'elastic_ip_address', label: '弹性IP地址' },
          { prop: 'private_ip_address', label: '私有IP地址' },
          { prop: 'specification', label: '规格' },
        ];
      }else if (resourceType === 'Ecs') {
        this.availableColumns = [
        { prop: 'name', label: '名称' },
          { prop: 'resource_type', label: '资源类型' },
          { prop: 'region', label: '区域' },
          { prop: 'resource_set_name', label: '所属资源集' },
          { prop: 'resource_name', label: '项目名称' },
          { prop: 'vdc_id', label: '所属VDC' },
          { prop: 'created_at_utc', label: '创建时间' },
          { prop: 'ecs_id', label: 'ecs_id' },
          { prop: 'order_number', label: '申请订单号' },
          { prop: 'resource_group', label: '所属资源组' },
          { prop: 'image', label: '镜像' },
          { prop: 'available_zone', label: '可用分区' },
          { prop: 'expiration_time', label: '到期时间' },
          { prop: 'operation_type', label: '操作类型' },
          { prop: 'user_id', label: '用户ID' },
          { prop: 'description', label: '描述' },
          { prop: 'status', label: '状态' },
          { prop: 'elastic_ip_address', label: '弹性IP地址' },
          { prop: 'private_ip_address', label: '私有IP地址' },
          { prop: 'specification', label: '规格' },
          { prop: 'is_soft_deleted', label: '是否软删除' },
        ];
      }else if (resourceType === 'Zyj') {
        this.availableColumns = [
          { prop: 'resource_set_name', label: '资源集名称' },
          { prop: 'name', label: '资源集别名' },
          { prop: 'region', label: '区域' },
          { prop: 'tenant_id', label: '所属租户' },
          { prop: 'authorized_vdc', label: '授权VDC' },
          { prop: 'status', label: '状态' },
          { prop: 'principal', label: '责任人' },
          { prop: 'supports_shared_vpc', label: '是否支持共享VPC' },
          { prop: 'vdc_level', label: 'vdc等级' },
          { prop: 'used_component', label: '所用组件' },
          { prop: 'system_id', label: '系统编号' },
          { prop: 'unified_cloud_report', label: '统一云管上报' },
          { prop: 'resource_application_time', label: '申请资源时间' },
          { prop: 'deployment_time', label: '申请资源时间' },
          { prop: 'online_time', label: '上线时间' },
          { prop: 'project_management_account', label: '项目管理账号' },
          { prop: 'account_received', label: '是否领取账号' },
          { prop: 'account_user', label: '账号使用人' },
          { prop: 'account_user_phone', label: '账号使用人电话' },
          { prop: 'role', label: '角色' },
          { prop: 'purpose', label: '用途' },
          { prop: 'self_built_or_push', label: '自建/统推' },
          { prop: 'running_or_deployment', label: '运行/部署' },
          { prop: 'description', label: '说明' },
          { prop: 'specialist', label: '专责' },
          { prop: 'specialist_email', label: '专责邮箱' },
          { prop: 'specialist_phone', label: '专责电话' },
          { prop: 'project_manager', label: '项目经理' },
          { prop: 'project_manager_phone', label: '项目经理电话' },
          { prop: 'project_manager_email', label: '项目经理邮箱' },
          { prop: 'maintenance_personnel', label: '运维人员' },
          { prop: 'maintenance_phone', label: '电话' },
          { prop: 'project_team_email', label: '项目组邮箱' },
        ];
      }else if (resourceType === 'Elb') {
        this.availableColumns = [
          { prop: 'name', label: '名称' },
          { prop: 'resource_type', label: '资源类型' },
          { prop: 'region', label: '区域' },
          { prop: 'resource_set_name', label: '所属资源集' },
          { prop: 'resource_name', label: '项目名称' },
          { prop: 'vdc_id', label: '所属VDC' },
          { prop: 'created_time', label: '创建时间' },
          { prop: 'elb_id', label: 'elb_ID' },
          { prop: 'order_number', label: '申请订单号' },
          { prop: 'resource_group', label: '所属资源组' },
        ];
      }else if (resourceType === 'Rds') {
        this.availableColumns = [
          { prop: 'name', label: '名称' },
          { prop: 'resource_type', label: '资源类型' },
          { prop: 'region', label: '区域' },
          { prop: 'resource_set_name', label: '所属资源集' },
          { prop: 'resource_name', label: '项目名称' },
          { prop: 'vdc_id', label: '所属VDC' },
          { prop: 'created_at_utc', label: '创建时间' },
          { prop: 'rds_id', label: 'rds_id' },
          { prop: 'order_number', label: '申请订单号' },
          { prop: 'resource_group', label: '所属资源组' },
          { prop: 'vpc_id', label: '虚拟私有云ID' },
          { prop: 'disk_size', label: '磁盘大小' },
          { prop: 'disk_type', label: '磁盘类型' },
          { prop: 'specification', label: '规格' },
          { prop: 'instance_ip', label: '实例IP' },
          { prop: 'status', label: '状态' },
          { prop: 'security_group_id', label: '安全组ID' },
          { prop: 'port', label: '端口' },
          { prop: 'subnet_id', label: '子网ID' },
          { prop: 'instance_type', label: '实例类型' },
          { prop: 'engine_version', label: '引擎版本' },
          { prop: 'engine_type', label: '引擎类型' },
        ];
      }else if (resourceType === 'Dcs'){
        this.availableColumns = [
          { prop: 'name', label: '名称' },
          { prop: 'resource_type', label: '资源类型' },
          { prop: 'region', label: '区域' },
          { prop: 'resource_set_name', label: '所属资源集' },
          { prop: 'resource_name', label: '项目名称' },
          { prop: 'vdc_id', label: '所属VDC' },
          { prop: 'created_at_utc', label: '创建时间' },
          { prop: 'dcs_id', label: 'dcs_id' },
          { prop: 'order_number', label: '申请订单号' },
          { prop: 'resource_group', label: '所属资源组' },
          { prop: 'connection_address', label: '链接地址' },
          { prop: 'used_memory_mb', label: '已用内存' },
          { prop: 'spec_gb', label: '规格' },
          { prop: 'instance_type', label: '实例类型' },
          { prop: 'cache_version', label: '缓存版本' },
          { prop: 'subnet_id', label: '子网id' },
          { prop: 'cache_type', label: '缓存类型' },
          { prop: 'security_group_id', label: '安全组id' },
          { prop: 'vpc_id', label: 'vpcID' },
          { prop: 'status', label: '状态' },
          { prop: 'port_number', label: '端口号' },
        ];
      }else if (resourceType === 'TxIp') {
        this.availableColumns = [
          { prop: 'name', label: '名称' },
          { prop: 'resource_type', label: '资源类型' },
          { prop: 'region', label: '区域' },
          { prop: 'resource_set_name', label: '所属资源集' },
          { prop: 'resource_name', label: '项目名称' },
          { prop: 'vdc_id', label: '所属VDC' },
          { prop: 'created_at', label: '创建时间' },
          { prop: 'order_number', label: '申请订单号' },
          { prop: 'resource_group', label: '所属资源组' },
          { prop: 'bandwidth_name', label: '带宽名称' },
          { prop: 'bandwidth_size', label: '带宽大小' },
          { prop: 'bandwidth_type', label: '带宽类型' },
          { prop: 'external_network', label: '带宽名称' },
        ];
      }else if (resourceType === 'CCE') {
        this.availableColumns = [
          { prop: 'name', label: '名称' },
          { prop: 'resource_type', label: '资源类型' },
          { prop: 'region', label: '区域' },
          { prop: 'resource_set_name', label: '所属资源集' },
          { prop: 'resource_name', label: '项目名称' },
          { prop: 'vdc', label: '所属VDC' },
          { prop: 'created_at', label: '创建时间' },
          { prop: 'order_number', label: '申请订单号' },
          { prop: 'resource_group', label: '所属资源组' },
          { prop: 'description', label: '描述' },
          { prop: 'status', label: '状态' },
          { prop: 'vpc', label: '虚拟私有云' },
          { prop: 'cluster_version', label: '集群版本' },
          { prop: 'auth_mode', label: '鉴权方式' },
          { prop: 'security_group', label: '安全组' },
          { prop: 'subnet', label: '子网' },
          { prop: 'service_cidr', label: '服务网段' },
          { prop: 'container_cidr', label: '容器网段' },
          { prop: 'service_lb_mode', label: '服务转发模式' },
          { prop: 'cluster_type', label: '集群类型' },
          { prop: 'cluster_spec', label: '集群规格' },
        ];
      }else if (resourceType === 'DDM') {
        this.availableColumns = [
          { prop: 'name', label: '名称' },
          { prop: 'resource_type', label: '资源类型' },
          { prop: 'region', label: '区域' },
          { prop: 'resource_set_name', label: '所属资源集' },
          { prop: 'resource_name', label: '项目名称' },
          { prop: 'vdc', label: '所属VDC' },
          { prop: 'created_at', label: '创建时间' },
          { prop: 'order_number', label: '申请订单号' },
          { prop: 'resource_group', label: '所属资源组' },
          { prop: 'resource_id', label: '资源id' },
          { prop: 'instance_status', label: '实例状态' },
          { prop: 'elastic_ip', label: '弹性IP' },
          { prop: 'security_group_id', label: '安全组ID' },
          { prop: 'network_id', label: '网络ID' },
          { prop: 'vpc_id', label: 'VPC ID' },
          { prop: 'disk_size', label: '磁盘大小' },
          { prop: 'disk_type', label: '磁盘类型' },
          { prop: 'instance_spec', label: '实例规格' },
          { prop: 'instance_ip', label: '实例IP' },
          { prop: 'instance_port', label: '实例端口' },
          { prop: 'instance_type', label: '实例类型' },
          { prop: 'engine_version', label: '引擎版本' },
          { prop: 'engine_type', label: '引擎类型' },
        ];
      }else if (resourceType === 'DDS') {
        this.availableColumns = [
          { prop: 'name', label: '名称' },
          { prop: 'resource_type', label: '资源类型' },
          { prop: 'region', label: '区域' },
          { prop: 'resource_set_name', label: '所属资源集' },
          { prop: 'resource_name', label: '项目名称' },
          { prop: 'vdc', label: '所属VDC' },
          { prop: 'created_at', label: '创建时间' },
          { prop: 'order_number', label: '申请订单号' },
          { prop: 'resource_group', label: '所属资源组' },
        ];
      }else if (resourceType === 'DRS') {
        this.availableColumns = [
          { prop: 'name', label: '名称' },
          { prop: 'resource_type', label: '资源类型' },
          { prop: 'region', label: '区域' },
          { prop: 'resource_set_name', label: '所属资源集' },
          { prop: 'resource_name', label: '项目名称' },
          { prop: 'vdc', label: '所属VDC' },
          { prop: 'created_at', label: '创建时间' },
          { prop: 'order_number', label: '申请订单号' },
          { prop: 'resource_group', label: '所属资源组' },
          { prop: 'resource_id', label: '资源id' },
        ];
      }else if (resourceType === 'EVS') {
        this.availableColumns = [
          { prop: 'name', label: '名称' },
          { prop: 'resource_type', label: '资源类型' },
          { prop: 'region', label: '区域' },
          { prop: 'resource_set_name', label: '所属资源集' },
          { prop: 'resource_name', label: '项目名称' },
          { prop: 'vdc', label: '所属VDC' },
          { prop: 'resource_id', label: '资源id' },
          { prop: 'created_at', label: '创建时间' },
          { prop: 'order_number', label: '申请订单号' },
          { prop: 'resource_group', label: '所属资源组' },
          { prop: 'description', label: '描述' },
          { prop: 'status', label: '状态' },
          { prop: 'capacity_gb', label: '容量(GB)' },
          { prop: 'disk_property', label: '磁盘属性' },
          { prop: 'is_shared', label: '共享盘标识' },
          { prop: 'user_id', label: '用户ID' },
          { prop: 'expiration_date', label: '到期时间' },
          { prop: 'disk_mode', label: '磁盘模式' },
          { prop: 'image', label: '镜像' },
          { prop: 'availability_zone', label: '可用分区' },
        ];
      }else if (resourceType === 'RomaConnect') {
        this.availableColumns = [
          { prop: 'name', label: '名称' },
          { prop: 'resource_type', label: '资源类型' },
          { prop: 'region', label: '区域' },
          { prop: 'resource_set_name', label: '所属资源集' },
          { prop: 'resource_name', label: '项目名称' },
          { prop: 'vdc', label: '所属VDC' },
          { prop: 'created_at', label: '创建时间' },
          { prop: 'resource_id', label: '资源id' },
          { prop: 'order_number', label: '申请订单号' },
          { prop: 'resource_group', label: '所属资源组' },
          { prop: 'description', label: '描述' },
          { prop: 'status', label: '状态' },
          { prop: 'ecs_list', label: '弹性云服务器列表' },
          { prop: 'public_access_address', label: '公网访问地址' },
          { prop: 'roma_connect_address', label: 'ROMA连接地址' },
          { prop: 'maintenance_end_time', label: '维护结束时间' },
          { prop: 'maintenance_start_time', label: '维护开始时间' },
          { prop: 'security_group_id', label: '安全组ID' },
          { prop: 'subnet_id', label: '子网ID' },
          { prop: 'vpc_id', label: '虚拟私有云ID' },
          { prop: 'product_id', label: '产品ID' },
          { prop: 'type', label: '类型' },
        ];
      }else if (resourceType === 'ServiceStage') {
        this.availableColumns = [
          { prop: 'name', label: '名称' },
          { prop: 'resource_type', label: '资源类型' },
          { prop: 'region', label: '区域' },
          { prop: 'resource_set_name', label: '所属资源集' },
          { prop: 'resource_name', label: '项目名称' },
          { prop: 'vdc', label: '所属VDC' },
          { prop: 'resource_id', label: '资源id' },
          { prop: 'created_at', label: '创建时间' },
          { prop: 'order_number', label: '申请订单号' },
          { prop: 'resource_group', label: '所属资源组' },
          { prop: 'engine_version', label: '引擎版本' },
          { prop: 'engine_status', label: '引擎状态' },
          { prop: 'external_ip', label: '外部IP' },
          { prop: 'engine_specification', label: '引擎规格' },
        ];
      }else if (resourceType === 'VPC') {
        this.availableColumns = [
          { prop: 'name', label: '名称' },
          { prop: 'resource_type', label: '资源类型' },
          { prop: 'region', label: '区域' },
          { prop: 'resource_set_name', label: '所属资源集' },
          { prop: 'resource_name', label: '项目名称' },
          { prop: 'vdc', label: '所属VDC' },
          { prop: 'created_at', label: '创建时间' },
          { prop: 'resource_id', label: '资源id' },
          { prop: 'order_number', label: '申请订单号' },
          { prop: 'resource_group', label: '所属资源组' },
          { prop: 'status', label: '状态' },
          { prop: 'segment', label: '网段' },
          { prop: 'availability_zone', label: '可用分区' },
        ];
      }
      this.displayedColumns = this.availableColumns.map(column => ({ ...column, visible: true }));
    },
    showColumnSettings() {
      this.selectedColumns = this.displayedColumns.filter(column => column.prop !== 'operation').map(column => column.prop);
      this.columnDialogVisible = true;
    },
    applyColumnSettings() {
      this.displayedColumns = this.availableColumns.filter(column => this.selectedColumns.includes(column.prop) || column.prop === 'operation').map(column => ({ ...column, visible: true }));
      this.columnDialogVisible = false;
    },
    init() {
      this.updateColumns();
      this.fetchData();
    },
    exportAllToExcel() {
      axios.get('/api/ybz/search_ybz', {
        params: {
          name: this.searchParams.name,
          resource_set_name: this.searchParams.resource_set_name,
          resourceTypeTbale: this.searchParams.resourceTypeTbale,
          // 请求所有数据
          page: 1,
          per_page: this.total,
        }
      }).then(response => {
        const allData = response.data.data;

        // 构建表头
        const headers = this.displayedColumns.filter(column => column.visible).map(column => column.label);
        const props = this.displayedColumns.filter(column => column.visible).map(column => column.prop);

        // 构建数据
        const data = allData.map(row => props.map(prop => row[prop]));

        // 添加表头到数据
        data.unshift(headers);

        // 创建工作簿
        const worksheet = XLSX.utils.aoa_to_sheet(data);
        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

        // 导出 Excel 文件
        const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
        saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '导出数据.xlsx');
      }).catch(error => {
        console.error("Error fetching all data:", error);
      });
    }
  },
  mounted() {
    this.init();
  }
};

</script>

<style>
.bottom-pagination {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* 表格表头样式 */
.el-table th .cell {
  white-space: nowrap;
  overflow: visible;
}

</style>
